<template>
  <a-spin :spinning="loading">
    <div id="#reportContainer">
      <a-layout>
        <a-layout-sider
          style="
            max-width: 260px;
            min-width: 260px;
            width: 260px;
            background-color: #fff;
            border-right: 1px solid #d5d5d5;
          "
          class="siderHeight"
        >
          <div class="components-list">
            <template v-if="true">
              <div class="widget-cate">基础组件</div>
              <draggable
                tag="ul"
                v-model="basicComponents"
                v-bind="{
                  group: { name: 'people', pull: 'clone', put: false },
                  sort: false,
                  ghostClass: 'ghost',
                }"
                item-key="key"
                :move="handleMove"
              >
                <template #item="{ element }">
                  <li
                    class="form-edit-widget-label ellipsis"
                    :class="{ 'no-put': element.type == 'divider' }"
                  >
                    <a style="display: flex; align-items: center">
                      <vab-icon
                        :icon="element.icon"
                        style="margin-right: 5px"
                      ></vab-icon>
                      <span>{{ element.name }}</span>
                    </a>
                  </li>
                </template>
              </draggable>
            </template>

            <template v-if="true">
              <div class="widget-cate">高级组件</div>
              <draggable
                tag="ul"
                v-model="advanceComponents"
                v-bind="{
                  group: { name: 'people', pull: 'clone', put: false },
                  sort: false,
                  ghostClass: 'ghost',
                }"
                item-key="id"
                :move="handleMove"
              >
                <template #item="{ element }">
                  <li
                    class="form-edit-widget-label ellipsis"
                    :class="{ 'no-put': element.type == 'divider' }"
                  >
                    <a style="display: flex; align-items: center">
                      <!-- <vab-icon
                        :icon="element.icon"
                        style="margin-right: 5px"
                      ></vab-icon> -->
                      <vab-icon
                        icon="line-chart-line"
                        style="margin-right: 5px"
                      ></vab-icon>

                      <span>{{ element.name }}</span>
                    </a>
                  </li>
                </template>
              </draggable>
            </template>

            <template v-if="true">
              <div class="widget-cate">布局字段</div>
              <draggable
                tag="ul"
                v-model="layoutComponents"
                v-bind="{
                  group: { name: 'people', pull: 'clone', put: false },
                  sort: false,
                  ghostClass: 'ghost',
                }"
                item-key="key"
                :move="handleMove"
              >
                <template #item="{ element }">
                  <li
                    class="form-edit-widget-label ellipsis"
                    :class="{ 'no-put': element.type == 'divider' }"
                  >
                    <a style="display: flex; align-items: center">
                      <vab-icon
                        :icon="element.icon"
                        style="margin-right: 5px"
                      ></vab-icon>
                      <span>{{ element.name }}</span>
                    </a>
                  </li>
                </template>
              </draggable>
            </template>
          </div>
        </a-layout-sider>
        <a-layout style="background-color: #fff; padding-left: 10px">
          <div style="margin-bottom: 10px; text-align: left">
            <a-button
              v-if="preview"
              class="ml-1"
              type="primary"
              @click="previewModel()"
            >
              <template #icon><EyeOutlined /></template>
              预览
            </a-button>
            <a-button
              v-if="saveForm"
              class="ml-1"
              type="primary"
              @click="handleSaveForm"
            >
              <template #icon><BookOutlined /></template>
              保存表单
            </a-button>

            <a-button
              class="ml-1"
              type="primary"
              @click="formSettingVisible = true"
            >
              <template #icon><SettingOutlined /></template>
              报表属性
            </a-button>
          </div>
          <a-divider style="margin: 10px 0"></a-divider>
          <a-layout-content>
            <widget-form
              v-if="!resetForm"
              ref="widgetForm"
              :widgetForm="widgetForm"
              v-model:select="widgetFormSelect"
              @openSetting="openSetting"
            ></widget-form>
          </a-layout-content>
        </a-layout>

        <vxe-modal
          resize
          width="860"
          title="表单设置"
          v-model="formSettingVisible"
        >
          <!-- 表单配置 -->
          <form-config :data="widgetForm.config"></form-config>
        </vxe-modal>
        <vxe-modal resize width="860" title="字段配置" v-model="settingVisible">
          <widget-config
            v-if="!resetForm"
            :key="widgetConfigKey"
            :formData="widgetForm.config"
            :data="widgetFormSelect"
          ></widget-config>
        </vxe-modal>
      </a-layout>

      <!-- 自定义表单预览开始 -->
      <vxe-modal
        width="900"
        height="600"
        title="自定义报表"
        show-zoom
        v-model="previewVisible"
      >
        <!-- 生成自定义表单 -->
        <generate-form :data="widgetForm"></generate-form>
      </vxe-modal>
      <!-- 自定义表单预览结束 -->
    </div>
  </a-spin>
</template>

<script>
  import VabIcon from '@/layout/vab-icon'
  import draggable from 'vuedraggable'
  import WidgetConfig from './WidgetConfig'
  import FormConfig from './FormConfig'
  import WidgetForm from './WidgetForm'
  import GenerateForm from './GenerateForm'
  import { layoutComponents, basicComponents } from './componentsConfig.js'
  import { Add, Update, Get } from '@/api/report/api'
  import { Getauthority } from '@/api/component/api'
  import {
    EyeOutlined,
    BookOutlined,
    SettingOutlined,
  } from '@ant-design/icons-vue'
  export default {
    name: 'FmMakingReport',
    components: {
      draggable,
      WidgetConfig,
      FormConfig,
      WidgetForm,
      GenerateForm,
      EyeOutlined,
      BookOutlined,
      SettingOutlined,

      VabIcon,
    },
    props: {
      clearForm: {
        type: Boolean,
        default: false,
      },

      preview: {
        type: Boolean,
        default: false,
      },
      saveForm: {
        type: Boolean,
        default: false,
      },
      generateCode: {
        type: Boolean,
        default: false,
      },
    },

    data() {
      return {
        loading: false,
        widgetConfigKey: '', //widget-config key值（用于刷新组件）
        advanceComponents: [],
        layoutComponents, // 布局字段
        basicComponents, // 基础字段
        resetForm: true,
        // 初始表单配置
        widgetForm: {
          list: [],
          config: {
            reportName: '', //报表名称
            reportType: '', //报表类别
            linkDb: '', //数据连接
            note: '',
          },
        },
        // 选择的组件数组
        widgetFormSelect: null,
        previewVisible: false, // 表单预览
        htmlTemplate: '', // 生成的html表单代码
        vueTemplate: '', // 生成的vue表单代码
        settingVisible: false,
        formSettingVisible: false,
      }
    },
    created() {
      Getauthority({ json: false }).then((res) => {
        if (res.isSuccess) {
          this.advanceComponents = res.content.items
        }
      })

      if (this.$route.query.id === undefined) {
        this.resetForm = false
      } else {
        Get({ id: this.$route.query.id }).then((res) => {
          if (res.isSuccess) {
            console.log(res)
            this.widgetForm = JSON.parse(res.content.json)
            // this.reportData = JSON.parse(res.content.dataJson)
            this.resetForm = false
          }
        })
      }
    },
    methods: {
      previewModel() {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.previewVisible = true
        }, 1000)
      },
      handleMove() {
        return true
      },

      openSetting() {
        this.settingVisible = true
        this.widgetConfigKey = new Date().getTime()
      },
      // 保存表单
      handleSaveForm() {
        var that = this
        this.$confirm({
          title: '确定要生成报表？',
          content: '点击确定提交至数据库。',
          okText: '是',
          cancelText: '否',
          onOk() {
            var isSubmit = true
            var config = that.widgetForm.config
            console.log(config)
            if (
              config.reportName === '' ||
              config.reportType === '' ||
              config.linkDb == ''
            ) {
              isSubmit = false
            }
            if (isSubmit) {
              if (that.$route.query.id === undefined) {
                Add({
                  DictId: that.widgetForm.config.reportType,
                  Name: that.widgetForm.config.reportName,
                  DbId: that.widgetForm.config.linkDb,
                  Json: JSON.stringify(that.widgetForm),
                  Note: that.widgetForm.config.note,
                }).then(() => {
                  that.$message.success('提交成功！')
                })
              } else {
                Update(
                  { id: that.$route.query.id },
                  {
                    DictId: that.widgetForm.config.reportType,
                    Name: that.widgetForm.config.reportName,
                    DbId: that.widgetForm.config.linkDb,
                    Json: JSON.stringify(that.widgetForm),
                    Note: that.widgetForm.config.note,
                  }
                ).then(() => {
                  that.$message.success('修改成功！')
                })
              }
            } else {
              that.$message.error('表单属性或组件字段不能为空')
            }
            // 、、-------------------------------------------------
          },
        })
      },
    },
  }
</script>

<style lang="less">
  .siderHeight {
    height: calc(100vh - 200px);
  }

  .form-edit-widget-label {
    font-size: 12px;
    display: block;
    width: 48%;
    line-height: 26px;
    position: relative;
    float: left;
    left: 0;
    overflow: hidden;

    margin: 1%;
    margin-right: 10px;
    color: #333;
    border: 1px solid #f4f6fc;
  }

  .form-edit-widget-label > a {
    display: block;
    cursor: move;
    background: #f4f6fc;
    border: 1px solid #f4f6fc;
    color: black;
  }
  .form-edit-widget-label > a .icon {
    margin-right: 6px;
    margin-left: 8px;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
  }

  .components-list ul {
    position: relative;
    overflow: hidden;
    padding: 0 10px 10px;
    margin: 0;
  }

  .widget-cate {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* --------------- */
  .ellipsis {
    width: 40%;
    height: 30px;
    overflow: hidden; /*内容超出后隐藏*/
    white-space: nowrap; //让内容只显示为一行
    text-overflow: ellipsis; //内容超出后显示为省略号
  }
</style>
